<template>
  <div class="service">
    <div class="warpper">
      <div class="service-head">
        <p class="service-title">{{ title }}</p>
        <p>——————</p>
      </div>
      <div class="service-content">
        <div class="service-content-top">
          <div class="service-content-left1">
            <img :src="harmonious.backgroundImg" alt="" />
            <img :src="harmonious.img" alt="" class="round1" />
            <p>
              <span>{{ harmonious.title }}</span> <br />
              <span> {{ harmonious.text }}</span>
            </p>
          </div>
          <div class="service-content-rigth1">
            <img :src="resource.backgroundImg" alt="" />
            <img :src="resource.img" alt="" class="round2" />
            <p>
              <span>{{ resource.title }}</span> <br />
              <span> {{ resource.text }}</span>
            </p>
          </div>
        </div>
        <div class="service-content-bottom">
          <div class="service-content-left2">
            <img :src="overbalance.backgroundImg" alt="" />
            <img :src="overbalance.img" alt="" class="round3" />
            <p>
              <span>{{ overbalance.title }}</span> <br />
              <span> {{ overbalance.text }}</span>
            </p>
          </div>
          <div class="service-content-rigth2">
            <img :src="promote.backgroundImg" alt="" />
            <img :src="promote.img" alt="" class="round4" />
            <p>
              <span>{{ promote.title }}</span> <br />
              <span> {{ promote.text }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/";
export default {
  data() {
    return {
      harmonious: {},
      resource: {},
      overbalance: {},
      promote: {},
      title: "",
    };
  },
  mounted() {
    api.getJoinUs().then((res) => {
      this.harmonious = res.data.applyFor.list[0];
      this.resource = res.data.applyFor.list[1];
      this.overbalance = res.data.applyFor.list[2];
      this.promote = res.data.applyFor.list[3];
      this.title = res.data.applyFor.title;
    });
  },
};
</script>

<style scoped lang="less" >
.warpper {
  background: url("../assets/bg.png");
  height: 700px;
  .service-head {
    padding-top: 20px;
    text-align: center;
    height: 100px;
    color: #fff;
    .service-title {
      letter-spacing: 0.5em;
      font-size: 30px;
    }
  }
  .service-content {
    overflow: hidden;
    .service-content-top {
      height: 280px;
      clear: both;
      .service-content-left1 {
        float: left;
        position: relative;
        width: 280px;
        height: 200px;
        .round1 {
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translateY(-51px);
        }
        p {
          width: 200px;
          position: absolute;
          top: 30px;
          left: 200px;
        }
      }
      .service-content-rigth1 {
        float: right;
        position: relative;
        margin-right: 10px;
        width: 280px;
        height: 200px;
        padding-right: 210px;
        .round2 {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-51px);
        }
        p {
          position: absolute;
          top: 50px;
          right: 205px;
        }
      }
    }
    .service-content-left2 {
      float: left;
      position: relative;
      width: 280px;
      height: 200px;
      .round3 {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-51px);
      }
      p {
        width: 200px;
        position: absolute;
        top: 30px;
        left: 200px;
      }
    }
    .service-content-bottom {
      height: 280px;
      .service-content-rigth2 {
        float: right;
        position: relative;
        margin-right: 10px;
        width: 280px;
        height: 200px;
        padding-right: 210px;
        // padding-right: 210px;
        .round4 {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-51px);
        }
        p {
          position: absolute;
          top: 50px;
          right: 205px;
        }
      }
    }
  }
  span {
    font-weight: bold;
    font-size: 30px;
  }
}
</style>